<template>
    <div class="foot">
        <div class="my-div">
            <a-form :model="params" name="basic" :label-col="{ span: 8 }">
                <a-row>
                    <a-col :push="2" :span="6">
                        <a-form-item label="队伍编号" name="teamNumber">
                            <a-input v-model:value="params.teamNumber" style="width: 180px;" />
                        </a-form-item>
                    </a-col>
                    <a-col :push="2" :span="6">
                        <a-form-item label="队伍资质" name="teamQualification">
                            <!-- <a-select v-model:value="params.teamQualification" mode="tags" style="width: 180px;"
                            placeholder="请输入井别"></a-select> -->
                            <a-input v-model:value="params.teamQualification" mode="tags" style="width: 180px;"
                                placeholder="请输入队伍资质"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :push="2" :span="6">
                        <a-form-item label="车辆号牌" name="vehicleNumber">
                            <a-input v-model:value="params.vehicleNumber" mode="tags" style="width: 180px;"
                                placeholder="请输入车辆号牌"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-divider orientation="left">HSE设备设施：有毒有害检测仪</a-divider>
                <a-row>
                    <a-col :push="2" :span="6">
                        <a-form-item label="规格型号">
                            <a-input v-model:value="hseListValue[0].specification" style="width: 180px;"
                                controls-position="right" />
                        </a-form-item>
                    </a-col>
                    <a-col :push="2" :span="6">
                        <a-form-item label="数量">
                            <a-input-number v-model:value="hseListValue[0].numbers" style="width: 180px;"
                                controls-position="right" :min="0" />
                        </a-form-item>
                    </a-col>
                    <a-col :push="2" :span="6">
                        <a-form-item label="设备状况">
                            <!-- <a-input v-model:value="hseListValue[0].condition" style="width: 180px;"
                            controls-position="right" /> -->
                            <a-select ref="select" v-model:value="hseListValue[0].condition" style="width: 180px"
                                @focus="focus" @change="handleChange">
                                <a-select-option value="完好">完好</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-divider orientation="left">HSE设备设施：伽马射线探测仪</a-divider>
                <a-row>
                    <a-col :push="2" :span="6">
                        <a-form-item label="规格型号" name="specification">
                            <a-input v-model:value="hseListValue[1].specification" style="width: 180px;"
                                controls-position="right" />
                        </a-form-item>
                    </a-col>
                    <a-col :push="2" :span="6">
                        <a-form-item label="数量" name="numbers">
                            <a-input-number v-model:value="hseListValue[1].numbers" style="width: 180px;"
                                controls-position="right" :min="0" />
                        </a-form-item>
                    </a-col>
                    <a-col :push="2" :span="6">
                        <a-form-item label="设备状况" name="condition">
                            <!-- <a-input v-model:value="hseListValue[1].condition" style="width: 180px;"
                            controls-position="right" /> -->
                            <a-select ref="select" v-model:value="hseListValue[1].condition" style="width: 180px"
                                @focus="focus" @change="handleChange">
                                <a-select-option value="完好">完好</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-divider orientation="left">HSE设备设施：正压式空气呼吸器</a-divider>
                <a-row>
                    <a-col :push="2" :span="6">
                        <a-form-item label="规格型号">
                            <a-input v-model:value="hseListValue[2].specification" style="width: 180px;"
                                controls-position="right" />
                        </a-form-item>
                    </a-col>
                    <a-col :push="2" :span="6">
                        <a-form-item label="数量">
                            <a-input-number v-model:value="hseListValue[2].numbers" style="width: 180px;"
                                controls-position="right" :min="0" />
                        </a-form-item>
                    </a-col>
                    <a-col :push="2" :span="6">
                        <a-form-item label="设备状况">
                            <!-- <a-input v-model:value="hseListValue[2].condition" style="width: 180px;"
                            controls-position="right" /> -->
                            <a-select ref="select" v-model:value="hseListValue[2].condition" style="width: 180px"
                                @focus="focus" @change="handleChange">
                                <a-select-option value="完好">完好</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-divider orientation="left">HSE设备设施：灭火器</a-divider>
                <a-row>
                    <a-col :push="2" :span="6">
                        <a-form-item label="规格型号">
                            <a-input v-model:value="hseListValue[3].specification" style="width: 180px;"
                                controls-position="right" />
                        </a-form-item>
                    </a-col>
                    <a-col :push="2" :span="6">
                        <a-form-item label="数量">
                            <a-input-number v-model:value="hseListValue[3].numbers" style="width: 180px;"
                                controls-position="right" :min="0" />
                        </a-form-item>
                    </a-col>
                    <a-col :push="2" :span="6">
                        <a-form-item label="设备状况">
                            <!-- <a-input v-model:value="hseListValue[3].condition" style="width: 180px;"
                            controls-position="right" /> -->
                            <a-select ref="select" v-model:value="hseListValue[3].condition" style="width: 180px"
                                @focus="focus" @change="handleChange">
                                <a-select-option value="完好">完好</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-divider orientation="left">HSE设备设施：电缆悬挂器</a-divider>
                <a-row>
                    <a-col :push="2" :span="6">
                        <a-form-item label="规格型号">
                            <a-input v-model:value="hseListValue[4].specification" style="width: 180px;"
                                controls-position="right" />
                        </a-form-item>
                    </a-col>
                    <a-col :push="2" :span="6">
                        <a-form-item label="数量">
                            <a-input-number v-model:value="hseListValue[4].numbers" style="width: 180px;"
                                controls-position="right" :min="0" />
                        </a-form-item>
                    </a-col>
                    <a-col :push="2" :span="6">
                        <a-form-item label="设备状况">
                            <!-- <a-input v-model:value="hseListValue[4].condition" style="width: 180px;"
                            controls-position="right" /> -->
                            <a-select ref="select" v-model:value="hseListValue[4].condition" style="width: 180px"
                                @focus="focus" @change="handleChange">
                                <a-select-option value="完好">完好</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-divider orientation="left">设计测井项目</a-divider>
                <a-row>
                    <a-col :push="2" :span="24">
                        <a-space v-for="(loggingContent, index) in dynamicValidateForm.loggingContentList"
                            :key="loggingContent.id" style="display: flex;" align="baseline" :size="20">
                            <!-- <a-form-item label="测量井段" :name="['loggingContent', index, 'size']"
                            :rules="[{ required: true, message: '请输入测量井段' }]"> -->
                            <a-form-item label="测量井段">
                                <a-input style="width: 180px;" v-model:value="loggingContent.wellSection" />
                            </a-form-item>
                            <a-form-item label="测量内容" :name="['loggingContent', index, 'size']">
                                <a-select v-model:value="loggingContent.content" mode="tags" style="width: 180px;"
                                    placeholder="请选择测量内容">
                                    <a-select-option v-for="item of surveyContent" :key="item">{{ item }}</a-select-option>
                                </a-select>
                                <!-- <a-input mode="tags" style="width: 150px;" placeholder="请输入测量内容"
                                v-model:value="loggingContent.content"></a-input> -->
                            </a-form-item>
                            <a-form-item label="比例">
                                <!-- <a-input mode="tags" style="width: 150px;" placeholder="请输入比例"
                                v-model:value="loggingContent.proportion"></a-input> -->
                                <a-select v-model:value="loggingContent.proportion" style="width: 150px;"
                                    placeholder="请选择比例">
                                    <a-select-option v-for="item of surveyProport" :key="item">{{ item }}</a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="仪器系列">
                                <!-- <a-input style="width: 180px;" controls-position="right"
                                v-model:value="loggingContent.instrumentSeries" /> -->
                                <a-select v-model:value="loggingContent.instrumentSeries" style="width: 180px;"
                                    placeholder="请选择仪器系列">
                                    <a-select-option v-for="item of surveyInstru" :key="item">{{ item }}</a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item>
                                <a-button style="margin-left: 10px; width:150px" type="dashed"
                                    v-if="dynamicValidateForm.loggingContentList.length > 1" class="dynamic-delete-button"
                                    :disabled="dynamicValidateForm.loggingContentList.length === 1" block
                                    @click="removeWellProjects(loggingContent)">删除行</a-button>
                            </a-form-item>
                        </a-space>
                    </a-col>
                </a-row>
                <a-button type="dashed" style="width: 100%;" block @click="addDomain">
                    <PlusOutlined />添加一行测井项目
                </a-button>
            </a-form>
        </div>
    </div>
    <div class="steps-action">
        <a-button @click="prev">上一步</a-button>
        <a-button style="margin-left: 8px" type="primary" @click="next">下一步</a-button>
    </div>
</template>
<script setup>
import { PlusOutlined } from '@ant-design/icons-vue';
import DesignScheme from '@/api/design/schemes.js'
const emit = defineEmits(["getCurrent"])
const props = defineProps({
    wellQuery: Object
})
const surveyContent = ref(['阵列感应', '自然电位', '自然伽马', '井径', '井斜', '补偿中子', '岩性密度', '声波时差', '电成像', '阵列声波', '核磁共振', '元素扫描', '介电扫描', '声成像', '双侧向', '双感应-八侧向', '阵列侧向'])
const surveyProport = ref(['1:40', '1:50', '1:100', '1:200', '1:500'])
const surveyInstru = ref(['CPLog', 'ECLIPS-5700', 'LOGIQ', 'MAXIS-500'])
const dynamicValidateForm = reactive({
    loggingContentList: []
});
const hseListValue = reactive([{
    equipmentName: '有毒有害检测仪',
    specification: '',
    numbers: '',
    condition: '完好'
}, {
    equipmentName: '伽马射线探测仪',
    specification: '',
    numbers: '',
    condition: '完好'
}, {
    equipmentName: '正压式空气呼吸器',
    specification: '',
    numbers: '',
    condition: '完好'
}, {
    equipmentName: '灭火器',
    specification: '',
    numbers: '',
    condition: '完好'
}, {
    equipmentName: '电缆悬挂器',
    specification: '',
    numbers: '',
    condition: '完好'
}])
const params = reactive({
    teamNumber: '',
    teamQualification: '',
    vehicleNumber: '',
    loggingContentList: [],
    hseList: hseListValue,
})


function setNewData(res) {
    for (const key in res) {
        if (res.hasOwnProperty(key) && params.hasOwnProperty(key) && key !== "hseList") {
            params[key] = res[key];
        }
    }
    hseListValue[0].equipmentName
    res.loggingContentList?.forEach(e => {
        // console.log('loggingContentList1', e);
        if (typeof e.content === 'string') {
            e.content = e.content.split("、")
        }
        // console.log('loggingContentList2', e);
        dynamicValidateForm.loggingContentList.push({
            content: e.content,
            instrumentSeries: e.instrumentSeries,
            proportion: e.proportion,
            wellSection: e.wellSection,
            id: e.wellSection,
        })
    })
    res.hseList?.forEach(item => {
        const matchingItem = hseListValue.find(hseItem => hseItem.equipmentName === item.equipmentName);
        if (matchingItem) {
            matchingItem.specification = item.specification;
            matchingItem.numbers = item.numbers;
            matchingItem.condition = item.condition;
        }
    });
}
getWellQuery()
function getWellQuery() {
    let state = localStorage.getItem("state");
    if (state === '修改井' && !props.wellQuery.hasOwnProperty("teamNumber")) {
        DesignScheme.getDataOne(localStorage.getItem("schemeId")).then(res => {
            console.log('getDataOne', res.loggingContentList);
            setNewData(res)
        })
    } else {
        setNewData(props.wellQuery)
    }
}
function next() {
    params.loggingContentList = dynamicValidateForm.loggingContentList
    params.loggingContentList.forEach((item, index) => {
        item.content = item.content.join('、')
    });
    params.page = 2
    emit('getCurrent', params)
}
function prev() {
    params.loggingContentList = dynamicValidateForm.loggingContentList
    params.loggingContentList.forEach((item, index) => {
        item.content = item.content.join('、')
    });
    params.page = 0
    emit('getCurrent', params)
}
const removeWellProjects = item => {
    let index = dynamicValidateForm.loggingContentList.indexOf(item);
    if (index !== -1) {
        dynamicValidateForm.loggingContentList.splice(index, 1);
    }
};
const addDomain = (e) => {
    console.log(e.target.innerText);
    if (e.target.innerText == '添加一行测井项目') {
        dynamicValidateForm.loggingContentList.push({
            content: [],
            instrumentSeries: '',
            proportion: '',
            wellSection: "",
            id: Date.now(),
        });
    }
};
</script>
<style scoped>
.my-div {
    width: 1370px;
    padding: 10px;
    transform: scaleY(-1);
}

.foot {
    overflow-x: auto;
    transform: scaleY(-1);
}
</style>